<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <pre>
        过滤器的作用就是 格式化数据 例如 格式化 时间、日期、首字母大写
        使用vue，调用filter方法 ，第一个参数为 自定义方法名称 ，第二个参数为 回调函数 
        回调函数的第一个参数为 需要处理的数据信息
    </pre>
    <div class="box">
        <div>{{msg | upper}}</div>
    </div>
    <script>
        // 全局过滤器
        // 使用vue，调用filter方法 ，第一个参数为 自定义方法名称 ，第二个参数为 回调函数 
        //  回调函数的第一个参数为 需要处理的数据信息
        // Vue.filter('upper', function(val) {
        //     return val.charAt(0).toUpperCase() + val.slice(1)
        // })
        Vue.filter('upper', function(val) {
            return val.charAt(0).toUpperCase() + val.slice(1)
        })
        var vm = new Vue({
            el: '.box',
            data: {
                msg: 'wjh'
            },
            // 局部 过滤器
            // filters: {
            //     upper: function(val) {
            //         return val.charAt(0).toUpperCase() + val.slice(1)
            //     }
            // }
        })
    </script>
</body>

</html>